@extends('layouts.mobile')

@section('title', '收货地址管理')

@section('content')

    <div class="address-list">
        @foreach ($items as $item)
            <div class="address-item">
                <div class="info">
                    <div class="consignee">
                        <div class="name">{{$item['consignee']}}</div>
                        <div class="phone">{{$item['phone']}}</div>
                    </div>
                    <div class="addr">{{$item['province']}} {{$item['city']}} {{$item['district']}} {{$item['street']}}</div>
                </div>
                <div class="actions">
                    <div class="setdefault">
                        <label><input data-id="{{$item['address_id']}}" rel="setdefault" type="radio" name="isdefault"@if($item['isdefault']) checked="checked"@endif></label>
                        <span>设为默认</span>
                    </div>
                    <div class="buttons">
                        <div data-id="{{$item['address_id']}}" rel="edit">
                            <span class="iconfont icon-edit"></span>
                            <span>编辑</span>
                        </div>
                        <div data-id="{{$item['address_id']}}" rel="delete" style="margin-left: 10px;">
                            <span class="iconfont icon-delete"></span>
                            <span>删除</span>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="tabbar">
        <div class="bar">
            <div class="button-lg" v-on:click="toggleForm()">+添加收货地址</div>
        </div>
    </div>

    @include('mobile.address.newaddress')
@stop

@section('foot')
    <script type="text/javascript">
        (function () {
            var vm = new Vue({
                el:'#app',
                data:{
                    address_id:'',
                    address:{
                        consignee:'',
                        phone:'',
                        province:'',
                        city:'',
                        district:'',
                        street:'',
                        isdefault:''
                    },
                    showForm:false
                },
                mounted:function(){
                    var district = new DistrictSelector({
                        province:this.province,
                        city:this.city,
                        district:this.district
                    });
                },
                methods:{
                    save:function () {
                        if (!this.address.consignee) {
                            DSXUI.showToast('请填写收货人姓名');
                            return false;
                        }

                        if (!this.address.phone) {
                            DSXUI.showToast('请填写联系电话');
                            return false;
                        }

                        if (!this.address.province) {
                            DSXUI.showToast('请选择省份');
                            return false;
                        }

                        // if (!this.address.city) {
                        //     DSXUI.showToast('请选择城市');
                        //     return false;
                        // }
                        //
                        // if (!this.address.district) {
                        //     DSXUI.showToast('请选择区县');
                        //     return false;
                        // }

                        if (!this.address.street) {
                            DSXUI.showToast('请填写街道地址');
                            return false;
                        }

                        if (this.address.isdefault) {
                            this.address.isdefault = 1;
                        } else {
                            this.address.isdefault = 0;
                        }

                        $.ajax({
                            type:'POST',
                            url:'/user/address/save',
                            data: {
                                address_id : this.address_id,
                                address : this.address
                            },
                            beforeSend:DSXUI.showSpinner,
                            success:function () {
                                DSXUtil.reFresh();
                            }
                        });
                    },

                    toggleForm:function () {
                        this.showForm = !this.showForm;
                    }
                }
            });

            $("#addnew").on('tap', function () {
                vm.showForm = true;
            });

            $("[rel=setdefault]").on('tap', function () {
                $.ajax({
                    url:'/user/address/setdefault',
                    data:{address_id:$(this).attr('data-id')},
                    success:function () {
                        DSXUtil.reFresh();
                    }
                });
            });

            $("[rel=delete]").on('tap', function () {
                if (confirm('确认要删除此地址吗?')){
                    $.ajax({
                        url:'/user/address/delete',
                        data:{address_id:$(this).attr('data-id')},
                        success:function () {
                            DSXUtil.reFresh();
                        }
                    });
                }
            });

            $("[rel=edit]").on('tap', function () {
                var address_id = $(this).attr('data-id');
                $.ajax({
                    url:'/user/address/getjson',
                    data:{address_id:address_id},
                    success:function (response) {
                        vm.address_id = address_id;
                        vm.address = response.address;
                        vm.showForm = true;
                        var district = new DistrictSelector({
                            province:response.address.province,
                            city:response.address.city,
                            district:response.address.district
                        });
                    }
                });
            });
        })();
    </script>
@stop
